<template>
    <div class="container">
        <h2 :class="currentColor">改变我的颜色吧!</h2>
        <button @click="changeColor">点击我改变颜色</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const colors = ['red', 'green', 'blue', 'orange', 'purple'];
const currentColor = ref(colors[0]);

const changeColor = () => {
    const randomIndex = Math.floor(Math.random() * colors.length); //向下取整 随机0到1 乘 长度 (0-4)
    currentColor.value = colors[randomIndex];
}
</script>

<style scoped>
.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(236, 236, 236);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}
.red {
    color: red;
}
.green {
    color: green;
}
.blue {
    color: blue;
}
.orange {
    color: orange;
}
.purple {
    color: purple;
}
</style>